<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tab选项卡</title>
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
    <script src="https://www.layuicdn.com/layui/layui.js"></script>
</head>
<body>
    <h2>简洁Tab</h2>
    <div class="layui-tab layui-tab-brief">
        <ul class="layui-tab-title">
            <li class="layui-this">网站设置</li>
            <li>用户管理</li>
            <li>权限分配</li>
            <li>商品管理<span class="layui-badge-dot layui-bg-orange"></span></li>
            <li>订单管理<span class="layui-badge">99+</span></li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">内容1</div>
            <div class="layui-tab-item">内容2</div>
            <div class="layui-tab-item">内容3</div>
            <div class="layui-tab-item">内容3</div>
            <div class="layui-tab-item">内容5</div>
        </div>
    </div>
    <hr>
    <h2>卡片Tab</h2>
<!--  lay-filter: 事件过滤器，相当于选择器，layui的专属选择器  -->
    <div class="layui-tab layui-tab-card layui-tab-brief" lay-allowClose="true" lay-filter="myTab">
        <ul class="layui-tab-title">
            <li class="layui-this myDemo" lay-id="1">网站设置</li>
            <li lay-id="2" class="myDemo">用户管理</li>
            <li lay-id="3" class="myDemo">权限分配</li>
            <li lay-id="4" class="myDemo">商品管理</li>
            <li lay-id="5" class="myDemo">订单管理</li>
        </ul>
        <div class="layui-tab-content" style="height: 100px;">
            <div class="layui-tab-item layui-show">1</div>
            <div class="layui-tab-item">2</div>
            <div class="layui-tab-item">3</div>
            <div class="layui-tab-item">4</div>
            <div class="layui-tab-item">5</div>
        </div>
    </div>
    <div class="layui-btn-group">
        <button class="layui-btn layui-btn-radius layui-btn-checked" id="add">添加一个Tab页</button>
        <button class="layui-btn layui-btn-radius layui-btn-checked" id="change">切换到权限分配模块</button>
        <button class="layui-btn layui-btn-radius layui-btn-checked" id="deleteOne">删除订单管理模块</button>
        <button class="layui-btn layui-btn-radius layui-btn-checked" id="deleteAll">删除所有模块</button>
    </div>

    <script>
        layui.use(["element", "jquery"], function () {
            var element = layui.element;
            var $ = layui.jquery;

            $("#add").click(function () {
                // myTab 映射 Tab 的 lay-filter属性
               element.tabAdd("myTab", {
                   title: "关于我",
                   content: "我在学习layui"
               })
            });

            $("#change").click(function () {
                element.tabChange("myTab", "3");
            });

            $("#deleteOne").click(function () {
                element.tabDelete("myTab", "5");
            });

            $("#deleteAll").click(function () {
                var list = $(".myDemo");
                list.each(function (index, item) {
                    var layId = item.getAttribute("lay-id");
                    element.tabDelete("myTab", layId);
                })
            });
        })
    </script>
</body>
</html>